<template>
  <el-card class="info-card">
    <template #header>
      <div class="header">
        <el-avatar size="large" icon="user" />
        <span class="title">个人信息</span>
      </div>
    </template>

    <div class="info-content">
      <!-- 使用 el-descriptions 展示个人信息 -->
      <el-descriptions
          title="基本信息"
          :column="2"
          border
          size="medium"
      >
        <el-descriptions-item label="姓名">{{ formData.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ formData.gender }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ formData.birthDate }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ formData.contact }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ formData.email }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ formData.address }}</el-descriptions-item>
      </el-descriptions>

      <!-- 个人简介 -->
      <div class="introduction">
        <div class="label">个人简介</div>
        <div class="value">{{ formData.introduction }}</div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="buttons">
      <el-button type="primary" @click="downloadInfo">下载信息</el-button>
      <el-button @click="editInfo">编辑信息</el-button>
    </div>
  </el-card>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      formData: {
        name: '张三',
        gender: '男',
        birthDate: '1995-05-20',
        contact: '12345678901',
        email: 'zhangsan@example.com',
        address: '北京市朝阳区',
        introduction: '一个努力的前端开发者，热爱技术与生活。'
      }
    };
  },
  methods: {
    // 下载个人信息为 JSON 文件
    downloadInfo() {
      const data = JSON.stringify(this.formData, null, 2);
      const blob = new Blob([data], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'user-info.json';
      a.click();
      URL.revokeObjectURL(url);
    },
    // 编辑个人信息
    editInfo() {
      console.log('跳转到编辑页面');
    }
  }
};
</script>

<style scoped>
.info-card {
  width: 80%;
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 8px;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

.introduction {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.introduction .label {
  font-weight: bold;
  margin-bottom: 5px;
}

.buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}
</style>